import {
  randomNum
} from "../shared/utils";

const reg_var = /\{\{(.*?)\}\}/g;

const reg_data_dom = /\<.+?\>\{\{(.+?)\}\}\<\/.+?\>/g;

let o = 0;

//获取<h1>{{count}}</h1>里面的<h1>标签名h1
const reg_tag = /\<(.+?)>/;

//定义一个状态池
export const statePool = [];

/**
 * 处理视图中绑定的属性变量
 * @param {*} template 视图模板
 * @param {*} state 响应式数据
 * @return 返回替换好的模板
 */
export function stateFormat(template, state) {

  /**
   * console.log(template);
   *<h1>{{count}}</h1>
   <button data-dom=1640267603654>+</button>
   <button data-dom=1640267602379>-</button>
   */

  // console.log(state);
  //Proxy {count: 0}

  //定义一个私有的state对象
  let _state = {};

  template = template.replace(reg_data_dom, function (node, key) {
    // console.log(node);
    //<h1>{{count}}</h1>

    // console.log(key);
    //count

    //获取<h1>{{count}}</h1>里面的<h1>标签名h1
    const matched = node.match(reg_tag);
    // console.log(matched);
    //['<h1>', 'h1', index: 0, input: '<h1>{{count}}</h1>', groups: undefined]

    // template = `<${matched[1]} data-dom="${_flag}">{{${key}}}</<${matched[1]}>`;

    //创建一个标识
    const _flag = randomNum();

    //保存flag到state对象里
    _state.flag = _flag;

    //缓存到状态池
    statePool.push(_state);

    //缓存后立马清空避免下次使用时有缓存
    _state = {};

    console.log(statePool);

    //返回带有以下要求的的模板
    //1.用户在视图模板编写的标签名
    //2.带有data-dom的属性
    return `<${matched[1]} data-dom="${_flag}">{{${key}}}</${matched[1]}>`;
  });

  // console.log(outerTemplate);
  // <h1 data-dom="1640273803538">{{count}}</<h1>
  // <button data-dom=1640273806381>+</button>
  // <button data-dom=1640273810299>-</button>

  template = template.replace(reg_var, function (node, key) {
    // console.log(node);
    //{{count}}

    // console.log(key);
    //count

    //<h1 data-dom="1640273803538">{{count}}</<h1>
    //拿到{{}}里面的变量
    let _var = key.trim();
    let i = 0;

    //情况1：有可能是这样的写法
    //<h1>{{info.age}}</h1>
    //解决方案：
    //1.将其变为数组
    //2.重写_var的访问属性
    const _varArr = _var.split('.');
    // console.log(_varArr);
    //['info', 'age']

    //拿到写法info.age的属性值
    while (i < _varArr.length) {
      // console.log(i);
      //0 / 1
      // console.log(state);
      //Proxy {count: 0, name: 'zhangsan', info: {…}}

      //_varArr[i] -> _varArr[0] -> count 
      //_varArr[i] -> _varArr[1] -> age 
      _var = state[_varArr[i]];
      i++;
    }

    // console.log(_var);
    //_var -> count -> 0

    //保存变量名数组到state对象里
    _state.state = _varArr;

    //定义一个唯一的state避免重复读取
    statePool[o].state = _varArr;
    o++;

    //返回带有以下要求的的模板
    //3.解析完{{info.age}}的结果后的模板
    //如<h1 data-dom="1640270330542">0</<h1>
    return _var;

  });

  // console.log(innerTemplate);
  // <h1 data-dom="1640274857469">0</<h1>
  // <button data-dom=1640274863825>+</button>
  // <button data-dom=1640274857571>-</button>



  return template;
}